<template>
  <el-main>
    <div class="w-full flex flex-row gap-2 border-b-gray-300 border p-2">
        <el-input v-model="searchQuery" placeholder="动物名称" class="max-w-[200px]"></el-input>
        <el-select v-model="FilterType"  placeholder="种类" style="width: 200px" >
          <el-option
              v-for="item in TypeOptions"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
        <el-select  v-model="FilterStatus" placeholder="处理状态" style="width: 200px" >
          <el-option
              v-for="item in statusoptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      <div>
        <el-button type="success" @click="FilteranimalRecord">查询</el-button>
        <el-button type="danger" @click="FilterReset">重置</el-button>
      </div>
    </div>
      <el-table v-if="medicallist" :data="medicallist" style="width: 100%" >
          <el-table-column prop="medical.id" label="编号"  />
          <el-table-column prop="animal.name" label="名称" />
          <el-table-column prop="animal.type" label="类别"  />
          <el-table-column prop="animal.age" label="年龄"  />
          <el-table-column prop="animal.gender" label="性别"  />
          <el-table-column prop="animal.healthStatus" label="健康状态"  />
          <el-table-column prop="animal.nowWeight" label="当前体重"  />
          <el-table-column prop="keepername" label="饲养员"  />
          <el-table-column prop="doctorname" label="医生名称"  />
          <el-table-column prop="medical.applicationTitle" label="申请主题"  />
          <el-table-column label="当前状态"  >
            <template #default="scope">
              <el-tag type="danger" v-if="scope.row.medical.applicationStatus === '待处理'">{{scope.row.medical.applicationStatus}}</el-tag>
              <el-tag type="warning" v-if="scope.row.medical.applicationStatus === '处理中'">{{scope.row.medical.applicationStatus}}</el-tag>
              <el-tag type="success" v-if="scope.row.medical.applicationStatus === '已结束'">{{scope.row.medical.applicationStatus}}</el-tag>
            </template>
        </el-table-column>
          <el-table-column label="操作" width="400" >
<!--                医生看到的按钮-->
              <!--                医生看到的按钮-->
              <!--                医生看到的按钮-->
              <template #default="scope"  v-if="USER.job==='医生'">
                  <div class="flex flex-row gap-1 w-[1000px]" >
                    <el-popconfirm
                        confirm-button-text="是"
                        cancel-button-text="否"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="你确认已完成了吗？"
                        @confirm="MedicalCompletion(scope.row)"
                        @cancel="cancelEvent">
                      <template #reference>
                        <el-button v-if="scope.row.medical.applicationStatus === '处理中'" type="success"  >医疗结束</el-button>
                      </template>
                    </el-popconfirm>
                      <el-button v-if="scope.row.medical.applicationStatus === '已结束'"  type="info" disabled @click="">订单已结束</el-button>
                      <el-popconfirm
                              confirm-button-text="是"
                              cancel-button-text="否"
                              :icon="InfoFilled"
                              icon-color="#626AEF"
                              title="你确认要取消吗？"
                              @confirm="CancelMedical(scope.row)"
                              @cancel="cancelEvent">
                          <template #reference>
                              <button v-if="scope.row.medical.applicationStatus !== '已结束'"class="bg-red-500 text-white px-2.5 py-1 rounded-md hover:bg-red-600"  >取消订单</button>
                          </template>
                      </el-popconfirm>
                  </div>
              </template>
          </el-table-column>
      </el-table>

  </el-main>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const USER = JSON.parse(localStorage.getItem('user'));

const isFlag = reactive({
    dialogVisbaleMedical:false,
})


const medicallist =ref([])
let currentMedical=reactive({
  applicationStatus:String,
  applicationDetail:String,
});
const filteredList=ref([])
const CurrentMedical=ref();
const searchQuery = ref();
const FilterStatus =ref();
const FilterType=ref();
const TypeOptions =ref();
const statusoptions = [
  {
    value:'待处理',
    label:'待处理',
  },
  {
    value:'处理中',
    label:'处理中',
  },

  {
    value:'已结束',
    label:'已结束',
  },
]
const typeoptions = ref();
function init(){
  axios.get('http://localhost:8080/medical/getlist/byuserid?id='+USER.id)
      .then(request =>{
        console.log(request)
        medicallist.value = request.data
      })
  axios.get('http://localhost:8080/animal/gettype')
      .then(request =>{
        console.log(request.data)
        TypeOptions.value=request.data;
        console.log(TypeOptions)
      })
}
onMounted(()=>{
  init()
})
function HandleEdit(currentmedical){
  CurrentMedical.value=null;
  CurrentMedical.value=currentmedical;
  console.log(CurrentMedical.value.medical.applicationDetail)
  currentMedical.applicationStatus=CurrentMedical.value.medical.applicationStatus;
  currentMedical.applicationDetail=CurrentMedical.value.medical.applicationDetail;
  isFlag.dialogVisbaleMedical=true;
}
function SaveEdit(){
  CurrentMedical.value.medical.applicationDetail=currentMedical.applicationDetail;
  CurrentMedical.value.medical.applicationStatus=currentMedical.applicationStatus;
  console.log(CurrentMedical.medical)
  axios.post('http://localhost:8080/medical/update',CurrentMedical.value.medical)
      .then(request =>{
        console.log(request.data)
        if (request.data){
          ElMessage({
            message:'修改成功',
            type:'success'
          })
          isFlag.dialogVisbaleMedical=false;
          init();
        }
      })

}
function FilteranimalRecord (){

  axios.get('http://localhost:8080/medical/getlist')
      .then(request =>{
        console.log(request)
        filteredList.value = request.data
        if(FilterType.value!=null){
          filteredList.value=filteredList.value.filter(item =>item.animal.type && item.animal.type == FilterType.value)
          console.log(FilterType.value)
        }
        if(FilterStatus.value=="待处理"){
          filteredList.value=filteredList.value.filter(item =>item.medical.applicationStatus && item.medical.applicationStatus =='待处理')
        }
        if(FilterStatus.value=="处理中"){
          filteredList.value=filteredList.value.filter(item =>item.medical.applicationStatus && item.medical.applicationStatus =='处理中')
        }
        if(FilterStatus.value=="已结束"){
          filteredList.value=filteredList.value.filter(item =>item.medical.applicationStatus && item.medical.applicationStatus =='已结束')
        }
        if(searchQuery.value!=null){
          filteredList.value=filteredList.value.filter(item => {
            return item.animal.name.includes(searchQuery.value);
          });}
        medicallist.value=filteredList.value;
      })
}
function Remove(currentMedical){
  axios.post('http://localhost:8080/medical/remove',currentMedical.medical)
      .then(request =>{
        console.log(request.data)
        if (request.data){
          ElMessage({
            message:'删除成功',
            type:'success'
          })
          location.reload()
        }
      })
}
function CancelMedical(currentOrder){
  console.log(currentOrder);
  currentOrder.medical.applicationStatus="待处理";
  axios.post('http://localhost:8080/medical/remove',currentOrder.medical)
      .then(request =>{
        console.log(request.data)
        if (request.data){
          ElMessage({
            message:'取消成功',
            type:'success'
          })
          init();
        }
      })
}
function MedicalCompletion(currentOrder){
  currentOrder.medical.applicationStatus="已结束";
  axios.post('http://localhost:8080/medical/update',currentOrder.medical)
      .then(request =>{
        console.log(request.data)
        if (request.data){
          ElMessage({
            message:'该医疗已完成',
            type:'success'
          })
          init();
        }
      })

}
function FilterReset(){
  location.reload();
}

</script>
